<template>
  <view class="">
    <view style="padding: 0 50rpx;">
      <!-- 邮箱账号 -->
      <view class="functionArray-item">
        <view style="margin: 50rpx 0;">
          <text style="font-size: 15px;">邮箱验证</text>
        </view>
        <input class="input" v-model="email" placeholder="请输入邮箱账号" placeholder-style="font-size:12px;color:#bbb;"
          :maxlength="32" />
        <!-- 右侧输入框+获取验证码 -->
        <view style="display: flex;justify-content: space-between;position: relative;">
          <input class="input" style="" v-model="verificationCode" placeholder="请输入邮箱验证码"
            placeholder-style="font-size:12px;color:#bbb;" :maxlength="10" />
          <!-- 获取验证码，重发  -->
          <view class="button" @click="getCode" v-show="isButton == 1 || isButton == 2">
            <text v-text="isButton == 1 ? '获取验证码' : '重发'"></text>
          </view>
          <!-- 60s重新发送 -->
          <view class="button" style="border: 1px solid #bbb;color: #bbb;" v-show="isButton == 3">
            <text>{{counter}}s重新发送</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 设置新密码 -->
    <view style="padding: 0 50rpx;">
      <view class="functionArray-item">
        <view style="margin: 50rpx 0;">
          <text style="font-size: 15px;">设置新密码</text>
        </view>
        <!-- 设置新密码 -->
        <input class="input" v-model="password" placeholder="请输入8-16位密码,需同时包含数字、字母"
          placeholder-style="font-size:12px;color:#bbb;" :maxlength="16" />
        <!-- 再次输入新密码 -->
        <input class="input" v-model="passwordCopy" placeholder="再次输入新密码" placeholder-style="font-size:12px;color:#bbb;"
          :maxlength="16" />
      </view>
    </view>

    <!-- 确认设置 -->
    <button class="button-bindingEmail" @click="editNewPwd">确认设置</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        email: '', // 邮箱账号
        verificationCode: '', // 验证码 
        password: '', // 新密码
        passwordCopy: '', // 重复新密码验证
        isGetCode: false, // 获取验证码节流阀
        isAcceptGetCodeTwo: false, // 后端是否已经发送验证码，发送成功之后才能开始绑定，节流
        counter: 60, // 默认60秒计时，60后可重发验证码
        timer: '', // 定时器对象
        isButton: 1, //获取验证码样式 1.获取验证码 可点 2.59s重新发送 3.重发 
        token: ''
      };
    },
    onLoad() {
      this.token = uni.getStorageSync('token')
    },
    methods: {
      /**
       * @deprecated 获取验证码
       */
      async getCode() {


        let email_reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

        if (!email_reg.test(this.email)) {
          uni.showToast({
            title: '请输入正确的邮箱格式！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (this.isGetCode) return // 判断当前是否正在执行该请求，是就跳出方法
        this.isGetCode = true // 打开节流阀

        // 通知服务器发送邮件验证码
        this.isAcceptGetCodeTwo = true
        // 同时设置获取验证码按钮为 示例： 60s 重新发送
        this.isButton = 3
        
        this.timer = setInterval(() => {
          this.counter--
          if (this.counter <= 0) {
            clearInterval(this.timer) //清除定时器
            this.isButton = 2
            this.counter = 60
          }
        }, 1000)
        
        await this.$http.common.resetPasswordEmail(this.token, this.email).then(res => {
          console.log("res: " + JSON.stringify(res));

          if (res.code == 401) {
            // if('无用户信息'){
            //   // 无用户信息
            //   // 当时还是要让用户认为有，不然会有安全风险
            //   // 同时设置获取验证码按钮为 示例： 60s 重新发送
            //   this.isButton = 3
              
            //   this.timer = setInterval(() => {
            //     this.counter--
            //     if (this.counter <= 0) {
            //       clearInterval(this.timer) //清除定时器
            //       this.isButton = 2
            //       this.counter = 60
            //     }
            //   }, 1000)
            //   return
            // }
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            })
            return
          }

          // if (res.code == 200) {
            // 邮件已发送成功
            // 可以开始绑定邮箱
 
          // }
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })

        this.isGetCode = false // 关闭节流阀
      },

      /**
       * @deprecated 确认设置按钮
       */
      async editNewPwd() {
        let email_reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
        let pwdNumber = /(?=.*[0-9]).{8,16}/;
        let pwdABC = /(?=.*[a-zA-Z]).{8,16}/;

        if (!email_reg.test(this.email)) {
          uni.showToast({
            title: '请输入正确的邮箱格式！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (!this.verificationCode) {
          uni.showToast({
            title: '请输入验证码！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (!this.isAcceptGetCodeTwo) {
          uni.showToast({
            title: '验证码错误，请重新获取',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (this.password.trim().length < 8) {
          uni.showToast({
            title: '密码必须大于8位！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (!pwdNumber.test(this.password.trim())) {
          uni.showToast({
            title: '密码必须包含数字！',
            icon: 'none',
            position: 'center'
          });
          return
        }
        
        if (!pwdABC.test(this.password.trim())) {
          uni.showToast({
            title: '密码必须包含字母！',
            icon: 'none',
            position: 'center'
          });
          return
        }
        
        if (this.password.trim() != this.passwordCopy.trim()) {
          uni.showToast({
            title: '两次密码输入不一致！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        uni.showLoading({
          title: '正在提交中...'
        })

        // 验证验证码是否正确，并修改用户密码
        await this.$http.user.editPwdByEmailCode(this.token, this.email, this.verificationCode, this.password.trim())
          .then(res => {
            console.log("res: " + JSON.stringify(res));

            if (res.code == 401) {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                position: 'center'
              })
              return
            }
            if (!res.code) {
              uni.showToast({
                title: '服务器开小差了',
                icon: 'none',
                position: 'center'
              })
              return
            }

            if (res.code == 200) {
              uni.showToast({
                title: '修改成功！',
                icon: 'none',
                position: 'center'
              })

              // 修改成功，延迟500ms后返回
              setTimeout(() => {
                uni.navigateBack()
              }, 500)
            }
          }).catch(err => {
            console.log("err: " + JSON.stringify(err));
          })

        uni.hideLoading()
      }
    }
  }
</script>

<style lang="scss">
  .functionArray-item {
    display: flex;
    flex-direction: column;
    padding: 0 25rpx;

    // input输入框
    & .input {
      width: 100%;
      text-indent: 20rpx;
      padding-bottom: 20rpx;
      margin-bottom: 40rpx;
      font-size: 16px;
      border-bottom: 1px solid #f0f0f0;
    }

    // 发送验证码按钮
    & .button {
      position: absolute;
      right: 0;
      border: 1px solid #155bff;
      margin-left: 25rpx;
      color: #155bff;
      padding: 10rpx 25rpx;
      border-radius: 3px;
    }
  }

  .button-bindingEmail {
    background: #000;
    color: #fff;
    margin: 30rpx;
    font-size: 16px;
  }
</style>
